<template>
	<view class="container">
		<u-cell-group :border="false">
			<u-cell title="站点" :value="stationName" @click="stationShow = true" :isLink="true"></u-cell>
			<u-cell title="班次" :value="shiftType" @click="shiftShow = true" :isLink="true"></u-cell>
			<u-cell :border="true" title="出勤人数">
				<u-number-box
					slot="right-icon"
					v-model="submit.workNum"
					step="1"
					min="1"
					integer>
				</u-number-box>
			</u-cell>
			<u-cell :border="true" title="生产工时">
				<u-number-box
					slot="right-icon"
					v-model="submit.workHoure"
					step="1"
					min="1"
					integer>
				</u-number-box>
			</u-cell>
			<u-cell :border="true" title="新员工人数">
				<u-number-box
					slot="right-icon"
					v-model="submit.newwokerNum"
					step="1"
					min="0"
					integer>
				</u-number-box>
			</u-cell>
			<u-cell :border="true" title="新员工产能">
				<u-number-box
					slot="right-icon"
					v-model="submit.newwokerCapacity"
					step="1"
					min="0"
					integer>
				</u-number-box>
			</u-cell>
			<u-cell :border="true" title="调出人数">
				<u-number-box
					slot="right-icon"
					v-model="submit.adjustNum"
					step="1"
					min="0"
					integer>
				</u-number-box>
			</u-cell>
			<u-cell title="调入班组" :value="teamName" @click="teamShow = true" :isLink="true"></u-cell>
		</u-cell-group>
		<view class="footer">
			<u-button class="btn delete" @click="delShow = true" shape="circle" size="large" type="error" v-if="dutyId !== 0">删除</u-button>
			<u-button class="btn cancel" @click="cancel" shape="circle" size="large" type="default" v-else>取消</u-button>
			
			<u-button class="btn submit" @click="updateWorkSubmitById" shape="circle" size="large" type="primary" v-if="dutyId !== 0">更新</u-button>
			<u-button class="btn submit" @click="dutySubmit" shape="circle" size="large" type="primary" v-else>提交</u-button>
		</view>
		
		<!-- 站点弹框 -->
		<u-picker 
			:show="stationShow" 
			:columns="stationList"
			:default-index="stationSelectedIndex"
			keyName="label"
			@change="stationPopupChange"
			@cancel="stationCancel"
			@confirm="stationConfirm">
		</u-picker>
		<!-- 班次弹框 -->
		<u-picker 
			:show="shiftShow" 
			:columns="shiftList"
			:default-index="shiftSelectedIndex"
			keyName="label"
			@change="shiftPopupChange"
			@cancel="shiftCancel"
			@confirm="shiftConfirm">
		</u-picker>
		<!-- 调入班组信息 -->
		<u-picker 
			:show="teamShow" 
			:columns="teamList"
			:default-index="teamSelectedIndex"
			keyName="label"
			@change="teamPopupChange"
			@cancel="teamCancel"
			@confirm="teamConfirm">
		</u-picker>
		<u-toast ref="uToast"></u-toast>
		<u-modal
			:content="delContent"
			:show="delShow"
			showCancelButton
			@confirm="deleteWorkSubmitById"
			@cancel="delShow = false"
		></u-modal>
	</view>
</template>

<script>
	import * as BaseApi from '@/api/base/base';
	export default {
		data() {
			return {
				stationId: null,
				shiftId: null,
				teamId: null,
				stationName: "请点击选择站点",
				shiftType: "请点击选中班次",
				submit: {
					workNum: 1,
					workHoure: 1,
					newwokerNum: 0,
					newwokerCapacity: 0,
					adjustNum: 0,
				},
				stationShow: false,
                stationList: [],
				stationSelectedIndex: [0],
				// 班次
				shiftShow: false,
                shiftList: [[
					{label: "白班", id: 1}, 
					{label: "晚班", id: 2},
				]],
				shiftSelectedIndex: [0],
				teamShow: false,
				teamList: [],
				teamName: "请点击选择调入班组",
				teamSelectedIndex: [0],
				// 出勤列表传递过来的页面参数
				dutyId: 0,
				delShow: false,
				delContent: "确认要删除该出勤提报数据吗？",
			}
		},
		onLoad (params) {
			console.log("页面参数,", params);
			if(params && params.id) {
				this.dutyId = params.id;
			}
		},
		created() {
			console.log("出勤填报页面初始化");
			this.init();
		},
		methods: {
			init() {
				this.stationList = [];
				this.teamList = [];
				this.shiftId = 1;
				this.shiftType = "白班";
				// TODO 初始化重新绑定分厂班组的列表信息
				BaseApi.workTeamlist().then(res => {
					  if (!res || !res.data || res.data.length == 0) {
						  return;
					  }
					  let result = res.data.map((item) => {
						return {
						  label: item.deptName,
						  id: item.deptId,
						};
					  });
					  this.teamList.push(result);
				});
				BaseApi.getStationList().then(res => {
					  if (!res || !res.data || res.data.length == 0) {
						  this.getWorkSubmitList();
						  return;
					  }
					  let result = res.data.map((item) => {
						return {
						  label: item.stationName,
						  id: item.stationId,
						};
					  });
					  this.stationName = result[0].label;
					  this.stationId = result[0].id;
					  this.stationList.push(result);
					  this.getWorkSubmitList();
				});
			},
			getWorkSubmitList() {
				BaseApi.getWorkSubmitById({id: this.dutyId}).then(res => {
					if (res && res.data) {
						Object.assign(this.submit, res.data);
						console.log("this.submit=", this.submit);
						let arrList = this.stationList[0];
						console.log("arrList=", arrList);
						for(let i =0;i<arrList.length;i++)  {
							let obj = arrList[i];
							if (this.submit.stationName == obj.label) {
								this.stationSelectedIndex = [i];
								this.stationName = obj.label;
								break;
							}
						}
						if (this.submit.shiftType == 2) {
							this.shiftType = "晚班";
							this.shiftId = 2;
							this.stationSelectedIndex[0] = 1;
						} else {
							this.shiftType = "白班";
							this.shiftId = 1;
							this.stationSelectedIndex[0] = 0;
						}
						if (this.submit.inTeamName) {
							this.teamName = this.submit.inTeamName
							this.teamId = this.submit.inTeamId;
						}
					}
				});
			},
			change(e) {
				console.log('change', e);
			},
			cancel() {
				console.log('Cancelled');
				// uni.navigateBack({ delta: 1});
				uni.navigateTo({ url: '/pages/work/dayreport/dutysubmitList' });
			},
			dutySubmit() {
				console.log('Submitted');
				if (this.teamId) {
					this.submit.inTeamId = this.teamId;
				}
				if (this.stationId) {
					this.submit.stationId = this.stationId;
				}
				if (this.shiftId) {
					this.submit.shiftType = this.shiftId;
				}
				BaseApi.teamWorkSubmit(this.submit).then(res => {
					if (res && res.code == 200) {
						this.success("保存成功", "/pages/work/dayreport/dutysubmitList");
					}
				}).catch(err => {
					// 提交异常
					console.error("出勤填报提交发生异常", err);
					this.error(`保存失败,${err.message}`);
				});
			},
			deleteWorkSubmitById() {
				if (!this.submit.id) {
					this.error(`id 为空，不能删除，请确认`);
					return;
				}
				BaseApi.deleteWorkSubmitById({id: this.submit.id}).then(res => {
					if (res && res.code == 200) {
						this.success("删除成功", "/pages/work/dayreport/dutysubmitList");
					}
				}).catch(err => {
					// 提交异常
					console.error("删除失败发生异常", err);
					this.error(`删除失败,${err.message}`);
				});
			},
			updateWorkSubmitById() {
				if (!this.submit.id) {
					this.error(`id 为空，不能更新，请确认`);
					return;
				}
				this.submit.stationId = this.stationId;
				this.submit.stationName = this.stationName;
				this.submit.shiftType = this.shiftId;
				this.submit.inTeamId = this.teamId;
				this.submit.inTeamName = this.teamName;
				BaseApi.updateWorkSubmitById(this.submit).then(res => {
					if (res && res.code == 200) {
						this.success("更新成功", "/pages/work/dayreport/dutysubmitList");
					}
				}).catch(err => {
					// 提交异常
					console.error("更新失败发生异常", err);
					this.error(`更新失败,${err.message}`);
				});
			},
			// 站点
			stationCancel(e){
				console.log("弹窗取消:", e);
				this.stationShow = false;
			},
			stationConfirm(e){
				this.stationId = e.value[0].id;
				this.stationName = e.value[0].label;
				this.stationShow = false;
			},
			stationPopupChange(e){
				console.log("弹窗改变:", e);
				this.stationSelectedIndex[0] = e.index;
			},
			// 班次
			shiftCancel(e){
				console.log("弹窗取消:", e);
				this.shiftShow = false;
			},
			shiftConfirm(e){
				this.shiftId = e.value[0].id;
				this.shiftType = e.value[0].label;
				this.shiftShow = false;
			},
			shiftPopupChange(e){
				console.log("弹窗改变:", e);
				this.shiftSelectedIndex[0] = e.index;
			},
			teamCancel(e){
				console.log("弹窗取消:", e);
				this.teamShow = false;
			},
			teamConfirm(e){
				this.teamId = e.value[0].id;
				this.teamName = e.value[0].label;
				this.teamShow = false;
			},
			teamPopupChange(e){
				console.log("弹窗改变:", e);
				this.teamSelectedIndex[0] = e.index;
			},
			// 操作提示语
			success(msg, url) {
				let params = {
						type: 'success',
						message: msg ? msg : "操作成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				};
				this.$refs.uToast.show({
					...params,
					complete() {
						url && uni.navigateTo({
							url: url
						})
					}
				});
			},
			error(msg) {
				params = {
					type: 'error',
					icon: true,
					duration: 4000,
					message: msg ? msg : "操作失败，请检查原因再重试！",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				};
				this.$refs.uToast.show({
					...params
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: 90px; /* 给底部按钮区域留出空间 */
		overflow: auto; /* 确保内容可以滚动 */
	}

	.footer {
		display: flex;
		justify-content: space-between;
		padding: 5px; /* 减少了 padding */
		background-color: #fff;
		border-top: 1px solid #ddd;
		position: fixed; /* 保持固定在底部 */
		bottom: 0;
		width: 100%;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.btn {
		flex: 1;
		margin: 2px;
		text-align: center;
	}

	.cancel {
		background-color: #ccc;
		margin: 5px;
	}
	.delete {
		margin: 5px;
	}

	.submit {
		background-color: #007bff;
		margin: 5px 15px 5px 5px;
	}
</style>

